//一、 函数  mixin（混入），定义函数
// 1.普通写法 
// .box1{
//     width: 100px;
//     height: 100px;
//     background-color: red;
// }

// .box2{
//     .box1; // 引用 box1的样式
//     border: 1px solid;
// }


// 2.可以当成函数来执行
// .box1 {
//     width: 100px;
//     height: 100px;
//     background-color: red;
// }

// .box2{
//     .box1(); // 当成函数执行
//     border: 1px solid;
// }


// 3.可以定义函数 传递参数

// .box1(@w,@h){   // 定义一个函数
//     width: @w;
//     height: @h;
// }

// .box2{
//     .box1(10px,20px);  // 调用函数
//     border: 1px solid;
// }

// 4.定义函数的时候 给函数默认参数
// .box1(@w:10px,@h:20px){  // 定义函数的时候给默认参数,如果没有传递 函数调用会安装默认值来赋值
//     width: @w;
//     height: @h;
// }

// .container{
//     .box1(100px,200px);
//     border:1px solid;
// }

// 5.函数作用域 
// .container{
//     width: 100px;
//     height: 100px;
//     .box{
//         width: 50px;
//         height: 50px;
//         background-color: red;
//     }
// }

// .active{
//     // 引用 .box样式
//     // .box;
//     // .container.box;
//     // .container .box;
//     .container .box();
//     border: 1px solid;
// }


// 二、匹配模式，类似 js里的switch case 操作 ；
// @_ 需要匹配的变量
// .box(@_){
//     width: 100px;
//     height: 100px;
// }

// // 情况一 ；
// .box(color1){
//     color: red;
// }

// // 情况二
// .box(color2){
//     color: blue;
// }

// .box(color3){
//     color: pink;
// }

// .container{
//     .box(color3);
//     border: 1px solid;
// }

// 三、重载： 根据参数 个数的不同 加载不同的函数
.box(@w){
    width: @w;
}

.box(@w,@h){
    width: @w;
    height: @h;
}

.container{
    .box(10px,20px); // 调用.box函数
    border: 1px solid;
}